<template>
  <div class="body">
    <!--导航-->
    <el-breadcrumb id="arrow" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>品牌车型</el-breadcrumb-item>
      <!--<el-breadcrumb-item>活动列表</el-breadcrumb-item>-->
      <!--<el-breadcrumb-item>活动详情</el-breadcrumb-item>-->
    </el-breadcrumb>
    <!--车型信息-->
    <div v-loading="loading"
         element-loading-text="拼命加载中"
         class="car">
      <!--分类-->
        <div class="car_head" v-for="(v,k) in car"  >
          <div class="car_title" >
            {{v.name}}
          </div>
          <div class="car_detail_1">
            <div @click="getDetail(item.id)" v-for=" item in v.list" class="car_detail_2" >
              <img :src="item.logo" alt="">
              <hr>
              <div class="d1">{{item.fullname}}</div>
              <div class="d2">{{item.salestate}}</div>
            </div>
          </div>
        </div>
    </div>

  </div>

</template>

<style scoped>
  .body{
   // border: 1px solid red;
    height: auto;
    width: 1300px;
    margin: 5% auto;
  }
  .car_title{
    display: inline-block;
    //border: 1px solid navy;
    width: 170px;
    height: 30px;
    text-align: center;
    border-radius: 5px;
    margin-top: 50px;
    font-weight: 300;
    line-height: 30px;
    float: left;
    background: #FF4F53;
    color: whitesmoke;
  }
  /*.car_title:hover{*/
    /*background: #FF4F53;*/
    /*color: whitesmoke;*/
    /*cursor:pointer;*/
  /*}*/
  .car_detail_1{
    //border: 1px solid black;
    width: 1300px;
    height: auto;
    margin-top: 10px;
    display: inline-block;
  }
  .car_detail_2{
    //border: 1px solid red;
    width: 220px;
    height: 250px;
    text-align: center;
    display: inline-block;
    //float: left;
    margin-right: 38px;
    margin-top: 10px;
    box-sizing: border-box;
    transition: all 1s;
    margin-bottom: 20px;
  }
  .car_detail_2:hover{
    cursor:pointer;
    box-shadow: 0 0 10px #888888;
    transform: scale(1.1,1.1);
    border-radius: 5px;

  }
  .car_detail_2 img{
    margin-top: 20px;
    width: 200px;
    height: 150px;
    border-radius: 5px;
  }
  .d1{
    font-weight: bold;
    margin-bottom: 5px;
  }
  .d2{
    color: red;
  }
  #arrow{
    font-size: 20px;
  }



</style>
<script>
  import axios from 'axios'
  export default {
    data(){
      return{
        car:[],
        type:1,
        loading:true,

      }
    },
    created(){
      //初始化车辆信息
      let url='https://www.dragonjun.com/jersey/api/query/get_car';
      let data=JSON.stringify({"type":"2","parentid":this.$route.params.id,"carid":"2571"});
      axios.post(url,data,{
        headers: {
          'Content-Type': 'application/json',
        }
      }).then((data)=>{
        //console.log(data);
        this.car=data.data.data.result;
        this.loading=false;
        //console.log(this.car);
      }).catch((error)=>{
        console.log(error);
      });
    },
    methods:{
      getDetail(id){
        this.$router.push('/carDetail/'+id);
      }
    }

  }

</script>
